<script setup lang="ts">
defineProps<{
  list: {
    id: number
    name: string
    price: number
    num: number
  }[]
}>()

const emits = defineEmits<{
  (e: 'setNum', id: number, step: number): void
}>()
</script>

<template>
  <div class="item" v-for="item in list" :key="item.id">
    <div class="name">{{ item.name }}</div>
    <div class="price">{{ item.price }}</div>
    <div class="count">
      <button @click="emits('setNum', item.id, 1)">+</button>
      {{ item.num }}
      <button @click="emits('setNum', item.id, -1)">-</button>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
